<template>
  <div class="my-card">
    <div class="card-title no-select">
      <div @dblclick="dbTitle" v-if="!visible">{{ formItem?.title }}</div>
      <el-input v-else v-model="formItem.title" @blur="visible = false"></el-input>
    </div>
    <div class="card-body">
    </div>
    <div class="add" v-if="formItem?.type !== 'Finish'">
      <el-popover
          placement="top-start"
          :width="300"
          trigger="click"
      >
        <el-button icon="edit" @click="addApprove">审批</el-button>
        <el-button icon="chat-square" @click="addSend">抄送</el-button>
        <el-button icon="close" @click="addEnd">结束</el-button>
        <template #reference>
          <el-icon size="30">
            <CirclePlus/>
          </el-icon>
        </template>
      </el-popover>
    </div>
  </div>
  <Tag v-if="formItem?.next" :form-item="formItem.next"></Tag>
</template>
<script setup lang="ts">
import {ref} from "vue";
import Tag from './Tag.vue'
import bus from "../bus";
const props = defineProps<{
  formItem: any
}>()
const visible = ref(false)
const dbTitle = () => {
  if (props.formItem.type == "Workflow" || props.formItem.type == "Finish") return
  visible.value = true
}

const addApprove = () => {
  bus.emit("addApprove",{
    id:props.formItem.id,
    key:"next"
  })
}
const addSend = () => {
  bus.emit("addSend",{
    id:props.formItem.id,
    key:"next"
  })
}
const addEnd = () => {
  bus.emit("addEnd",{
    id:props.formItem.id,
    key:"next"
  })
}
const del = () => {
  bus.emit("del",props.formItem.id)
}
</script>

<style lang="less" scoped>
.my-card {
  margin: 30px;
  box-shadow: 0px 0px 10px 3px #9f9f9f;
  width: 200px;
  border-radius: 6px;
  .card-title {
    border-radius: 6px 6px 0 0;
    padding: 4px;
    color: aliceblue;
    background-color: green;
  }

  .card-title-approve {
    padding: 4px;
    color: aliceblue;
    background-color: #ff8900;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
  }

  .add {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    :after{
      position: absolute;
      content: "";
      width: 1px;
      height: 60px;
      background: #bbbbbb;
    }
  }
}
</style>